<template v-cloak>
  <view class="search">
    <view class="search-input">
      <u-search
        :show-action="true"
        v-model="keyword"
        placeholder="搜索文章"
        action-text="搜索"
        :animation="true"
        color="#8486f8"
        shape="square"
        @search="GetList"
        @custom="GetList"
        :focus="true"
      ></u-search>
    </view>

    <view class="search-list-article" v-if="!keyword">
      <view class="title"
        ><image src="/static/icon/search.png" mode="widthFix"></image>热门搜索
      </view>
      <view class="search-list-item">
        <view
          class="padding-md"
          v-for="(v, i) in searchArticleList"
          :key="v.id"
        >
          <view
            style="margin: 0 8upx 8upx 0"
            class="cu-tag sm"
            @click="HandleView(v.id)"
            >{{ v.title }}</view
          >
        </view>
      </view>
    </view>

    <view class="search-list" v-if="articleList.length">
      <view
        class="item"
        v-for="(v, i) in articleList"
        :key="v.id"
        @click="HandleView(v.id)"
      >
        <view class="nav-item">
          <view class="title t1">
            <u-icon name="search" class="icon-search"></u-icon>
            <text> {{ v.title }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="" v-if="keyword && !articleList.length">
      <view class="no-data">
        <image src="/static/inbetweening/no-search.png" mode="widthFix"></image>
        <view class="title"> 暂无内容 </view>
      </view>
    </view>
    <!-- 000 -->
    <view class="article" v-if="!keyword && guessLikeList.length">
      <view class="title-more flex-between">
        <view class="title">
          <image src="/static/icon/guess_like.png" mode="widthFix"></image>
          <text>猜你喜欢</text>
        </view>
      </view>
      <view class="article-list b-f">
        <view
          class="item"
          v-for="(v, i) in guessLikeList.slice(0, 5)"
          :key="v.id"
          @click="HandleView(v.id)"
        >
          <view class="nav-item">
            <view
              class="cover br10"
              :style="{ backgroundImage: 'url(' + v.cover + ')' }"
            >
            </view>
            <view class="info">
              <view class="title t2">
                {{ v.title }}
              </view>
              <view class="tag-list flex">
                <view
                  class="padding-md"
                  v-for="(item, index) in v.label_list"
                  :key="index"
                >
                  <view class="cu-tag sm light bg-purple">{{
                    item.title
                  }}</view>
                </view>
              </view>
              <view class="tag-time flex-between">
                <view class="eye"> {{ v.view_num }}阅读 </view>

                <view class="time"> {{ v.create_at }} </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal
      v-model="show"
      :confirm-style="{ color: '#8486f8' }"
      content="不能搜索空白消息"
    ></u-modal>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      keyword: "",
      searchArticleList: [],
      articleList: [],
      guessLikeList: [],
      getHistoryList: [],
    }
  },
  watch: {
    keyword(newVal) {
      if (!newVal) {
        this.articleList = []
      } else {
        this.GetList()
      }
    },
  },
  onHide() {
    this.keyword = ""
  },
  onShow() {
    this.GetSearchArticleList()
    this.GetGuessLikeList()
  },
  methods: {
    GetList() {
      this.GetArticleList()
    },
    GetArticleList() {
      var _self = this
      if (_self.keyword.trim() == "") {
        _self.show = !_self.show
        return
      }
      var data = {
        title: _self.keyword,
      }
      _self.$store.dispatch("article/list", data).then(res => {
        _self.articleList = res.data
      })
    },
    GetSearchArticleList() {
      let _self = this
      let data = {
        status: 1,
        a_type: 1,
      }
      _self.$store.dispatch("article/list", data).then(res => {
        _self.searchArticleList = res.data
      })
    },
    GetGuessLikeList() {
      var _self = this
      var data = {
        a_type: 2,
        status: 1,
      }
      _self.$store.dispatch("article/list", data).then(res => {
        _self.guessLikeList = res.data
      })
    },
    HandleView(id) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.search {
  .search-input {
    padding: 20upx;
    background: #fff;
  }
}
.search-list-article {
  padding: 20upx;
  .title {
    font-size: 26upx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 20upx;
    image {
      width: 40upx;
      height: 40upx;
      vertical-align: middle;
      margin-top: -10upx;
      margin-right: 6upx;
    }
  }
  .search-list-item {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 20upx;
  }
}
.search-list {
  background-color: #fff;
  padding: 0 30upx;
  .title {
    height: 64upx;

    line-height: 64upx;
    .icon-search {
      font-size: 32upx;
      vertical-align: middle;
    }
    text {
      font-size: 24upx;
      margin-left: 20upx;
    }
  }
}
.article {
  padding: 20upx 20upx 50upx 20upx;
  .title {
    font-size: 24upx;
    image {
      width: 42upx;
      height: 42upx;
      vertical-align: middle;
      margin-top: -10upx;
      margin-right: 10upx;
    }
  }
  .more {
    font-size: 22upx;
    color: #999999;
  }
}
</style>
